<template>
<div class="todo-list">
    <el-input v-model="text" class="w200"></el-input>
    <el-button type="primary" @click="submit">提交</el-button>
    <ul class="list">
        <li class="item box-flex" v-for="(item,index) in list" :key="index">
            <span class="flex-one">{{item}}</span>
            <el-button type="text" size="mini" @click="del(index)">删除</el-button>
        </li>
    </ul>
</div>
</template>

<script>
export default {
  data() {
    return {
        text:''
    };
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    emptyText:{
        type:Boolean,
        default:false
    }
  },
  watch:{
     emptyText(val){
         if(true){
             this.text=''
             this.$emit('empty',false)
         }
     } 
  },
  methods: {
    submit() {
      this.$emit("add", this.text);
    },
    del(index){
        this.$emit('del',index)
    }
  }
};
</script>
<style lang="scss" scoped>
.list{
    width: 300px;
    box-shadow: 0 0 5px 2px #eee;
    padding:20px;
    margin-top:15px;margin:  20px auto 0;
}
</style>

